<template>
	<basic-container class="baseContain">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="0"><a>当前类目</a></el-menu-item>
			<el-menu-item index="1"><a>基本信息</a></el-menu-item>
			<el-menu-item index="2"><a>自然属性</a></el-menu-item>
			<el-menu-item index="3"><a>销售属性</a></el-menu-item>
			<el-menu-item index="4"><a>店铺分类</a></el-menu-item>
			<el-menu-item index="5"><a>物流信息</a></el-menu-item>
			<el-menu-item index="6"><a>详情描述</a></el-menu-item>
			<el-menu-item index="7"><a>其他信息</a></el-menu-item>
		</el-menu>
		<div class="scrollView" @scroll="contentScroll" ref="contentScroll">
			<avue-form ref="obj" :rules="avueformRules" v-model="groupData" :option="optionView" style="padding-top: 15px;">
				<template slot="menuForm">
					<el-button v-if="!isCheck" type="primary" :loading="submitLoading" size="mini" :disabled="isDisabled" @click="handleSubmit">提交</el-button>
				</template>
				<!-- 当前类目 -->
				<template slot="group1Header">
					<h1 class="avue-group__title">当前类目:</h1>
					<span style="fontSize:12px;margin:0 30px 0 10px;">{{ goodsclassname }}</span>
					<el-button type="primary" size="mini" :disabled="isCheck || isRedact" @click.stop="chooseCategory">选择类目</el-button>
				</template>
				<!-- 商品图片 -->
				<template slot="goodsPhotos">
					<div class="imgContainer">
						<div class="upload">
							<el-button size="mini" :disabled="isCheck" type="primary" @click="uploadbtn">上传图片</el-button>
							<p class="tsmsg">最多可发布5张照片，尺寸750*750</p>
						</div>
						<div class="previewPic">
							<div class="demo-image__preview" style="margin-right:10px" v-for="(item, index) in groupData.goodsPhotos" :key="index">
								<el-image :src="item" style="width: 100px; height: 100px"></el-image>
								<div class="handlebox">
									<div v-if="!isCheck">
										<img @click="arrowLeft(index)" :src="require('../../../../../public/img/placeholderimg/arrow_left.png')" />
										<img @click="arrowDel(index)" :src="require('../../../../../public/img/placeholderimg/arrow_del.gif')" />
										<img @click="arrowRight(index)" :src="require('../../../../../public/img/placeholderimg/arrow_right.png')" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>

				<!-- 商品视频 -->
				<template slot="goodsVideo">
					<div class="imgContainer">
						<div class="upload">
							<el-button size="mini" :disabled="isCheck" type="primary" @click="uploadVideoBtn">上传视频</el-button>
							<p class="tsmsg">只能发布一个视频</p>
						</div>
						<div class="previewPic">
							<div class="demo-image__preview" style="margin-right:10px" v-for="(item, index) in groupData.goodsVideo" :key="index">
								<video :src="item" class="avatar" controls="controls"></video>
								<div class="handlebox">
									<div v-if="!isCheck"><img @click="videoDel(index)" :src="require('../../../../../public/img/placeholderimg/arrow_del.gif')" /></div>
								</div>
							</div>
						</div>
					</div>
				</template>
				<!--规格配置-->
				<template slot="goodsSpecConfig">
					<div class="goodsSpecConfig">
						<div class="specbox" v-for="(item, index) in saleSpecList" :disabled="isCheck" :key="index">
							<div style="min-width: 80px;">{{ item.specName }}:</div>
							<div class="ckeckitem">
								<span class="items" v-for="(prop, idx) in item.childrenNodes" :key="idx">
									<el-checkbox
											type="checkbox"
											@change="handleCheckedChange(index, idx, item.id, prop.isselected)"
											:value="prop"
											:disabled="isCheck || disadledSpec"
											:id="prop.specpValue"
											v-model="prop.isselected"
											style="margin-right: 5px;"
									></el-checkbox>
									<el-image class="checkimg" @click="choosePic(index, idx)" v-if="item.specModule == 'img'" :src="prop.specImageUrl" />
									<!--<label v-if="!prop.isselected"
                           style="width: 80px;margin-left: 5px;border: 0;"
                           :for="prop.specpValue">
                      {{prop.specpValue}}</label>-->
									<input v-if="!prop.isselected" :disabled="isCheck || disadledSpec" style="width: 80px;margin-left: 5px;border: 0;" v-model="prop.specpValue" />
									<input
											v-else
											type="text"
											style="width: 80px;margin-left: 5px;border: 0;"
											:disabled="isCheck || disadledSpec"
											@change="handleCheckedChange(index, idx, item.id, prop.isselected)"
											v-model="prop.specpValue"
									/>
								</span>
							</div>
						</div>

						<table width="100%" border="0">
							<tr>
								<th width="20%" >规格</th>
								<th width="13%">库存</th>
								<th width="14%">价格</th>
								<th width="15%">商品原价</th>
								<th width="15%">进货价</th>
								<th width="10%">商品编码</th>
								<th width="13%">操作</th>
							</tr>
							<tr>
								<td width="20%"></td>
								<td width="13%"><input type="number" class="specsBox" min="0" :disabled="isCheck || disadledSpec" v-model="prospec.goodsInventory" /></td>
								<td width="14%"><input type="number" :precision="2" min="0" class="specsBox" :disabled="isCheck || disadledSpec" v-model="prospec.price" /></td>
								<td width="15%"><input type="number" precision="2" min="0" class="specsBox" :disabled="isCheck || disadledSpec" v-model="prospec.originalPrice" /></td>
								<td width="15%"><input type="number" precision="2" min="0" class="specsBox" :disabled="isCheck || disadledSpec" v-model="prospec.purchasePrice" /></td>
								<td width="10%"><input type="text" class="specsBox" :disabled="isCheck || disadledSpec" v-model="prospec.goodsSerial" /></td>
								<td width="13%"><el-button type="primary" size="mini" :disabled="isCheck || disadledSpec" @click="confirmFill">确认填充</el-button></td>
							</tr>
							<tr v-for="(item, index) in tabledata" :key="index">
								<td class="spectab" style="margin: 0 auto">{{ item.value }}</td>
								<td>
									<el-input-number v-model="item.goodsInventory" controls-position="right"  :min="0"></el-input-number></td>
								<td>
									<el-input-number v-model="item.price" :disabled="isCheck" :precision="2" :step="1" :min="0"></el-input-number>
								</td>
								<td>
									<el-input-number v-model="item.originalPrice" :disabled="isCheck" :precision="2" :step="1" :min="0"></el-input-number>
								</td>
								<td>
									<el-input-number v-model="item.purchasePrice" :disabled="isCheck" :precision="2" :step="1" :min="0"></el-input-number>
								</td>
								<td><input class="specsBox" :disabled="isCheck" v-model="item.goodsSerial" style="text-indent: 15px;" /></td>
								<td></td>
							</tr>
						</table>
					</div>
				</template>
				<!-- 店铺分类 -->
				<template slot="userGoodsClassId">
					<div class="storebox">
						<el-button type="primary" style="marginRight:20px;" size="mini" :disabled="isCheck" @click="goodsClassOpen">新增分类</el-button>
						<el-cascader v-model="value" :disabled="isCheck" :options="cascaderoptions"></el-cascader>
					</div>
				</template>
				<!-- 运费模板 -->
				<template slot="transportId">
					<div style="display:flex;">
						<el-select @change="getTransType" v-model="groupData.transportId" :disabled="isCheck" placeholder="请选择">
							<el-option v-for="(item, index) in templateFreightData" :key="index" :label="item.transName" :value="item.id"></el-option>
						</el-select>
						<el-button style="marginLeft:20px" size="mini" type="primary" :disabled="isCheck" @click="templateFreightHandle">新增运费模板</el-button>
					</div>
				</template>
				<!-- 商品属性 -->
				<template slot="productsize">
					<div class="sizebox">
						<div class="fromRow ">
							<div class="Name">长度：</div>
							<el-input style="width:100px;margin-right:5px;" type="number" min="0" size="mini" :disabled="isCheck" v-model="groupData.goodsLength"></el-input>
							<i>cm</i>
						</div>
						<div class="fromRow ">
							<div class="Name">宽度：</div>
							<el-form :rules="goodsWidthRules">
								<el-input
										style="width:100px;margin-right:5px;"
										type="number"
										min="0"
										precision="2"
										size="mini"
										:disabled="isCheck"
										prop="goodsWidth"
										v-model="groupData.goodsWidth"
								></el-input>
							</el-form>
							<i>cm</i>
						</div>
						<div class="fromRow ">
							<div class="Name">高度：</div>
							<el-input
									style="width:100px;margin-right:5px;"
									type="number"
									min="0"
									:precision="2"
									size="mini"
									:disabled="isCheck"
									v-model="groupData.goodsHeight"
							></el-input>
							<i>cm</i>
						</div>
						<div class="fromRow ">
							<div class="Name">体积：</div>
							<el-input style="width:100px;margin-right:5px;" size="mini" :precision="2" min="0" readonly :disabled="isCheck" v-model="goodsVolume"></el-input>
							<i>dm³</i>
						</div>
						<div class="fromRow ">
							<div class="Name">重量：</div>
							<el-input
									style="width:100px;margin-right:5px;"
									type="number"
									:precision="2"
									minRows="0"
									min="0"
									size="mini"
									:disabled="isCheck"
									v-model="groupData.goodsWeight"
							></el-input>
							<i>kg</i>
						</div>
					</div>
				</template>
				<!-- 商品描述pc -->
				<template slot="goodsDetails">
					<editor v-if="editorshow" :isCheck="isCheck" :isRedact="isRedact" @getContent="getEditcont" prop="goodsDetails" :cabackcontent="cabackcontent"></editor>
				</template>
				<!-- 商品描述h5 -->
				<template slot="goodsDetailsH5">
					<editor v-if="editorshow" :isCheck="isCheck" :isRedact="isRedact" @getContent="getEditconth5" prop="goodsDetailsH5" :cabackcontent="cabackcontenth5"></editor>
				</template>
			</avue-form>
		</div>
		<!-- 选择类目弹窗 -->
		<change-goods-class ref="changeGoods" :isPublish="isPublish" @callback="changeclassdata" :isRedact="isRedact"></change-goods-class>
		<sel-file
				ref="selFile"
				@callback="selFileCallBack"
				imgNum="5"
				albumCode="store"
				dialogTitle="选择图片"
				selectType="checkbox"
				selMaxWidth="300px"
				selMaxHeight="300px"
		></sel-file>
		<sel-file ref="selVideo" @callback="selVideoCallBack" albumCode="store" dialogTitle="选择视频" selMaxWidth="300px" selMaxHeight="300px" resType="video"></sel-file>
		<sel-file ref="specimg" @callback="specChooseimg" albumCode="store" dialogTitle="选择图片" selectType="radio" selMaxWidth="300px" selMaxHeight="300px"></sel-file>
		<el-dialog title="新增分类" :visible.sync="dialogTableVisible" width="80%"><goods-class v-if="dialogTableVisible"></goods-class></el-dialog>
		<el-dialog title="商品发布成功" :visible.sync="dialogSuccessVisible" append-to-body width="30%" :close-on-click-modal="false" :show-close="false">
			<div class="boxSuccess">
				<p class="icon-success icon-dui"></p>
				<p class="tip-success">发布成功</p>
				<router-link to="/base/goods/seller/addGoodsMinMao" @click.native="keepOnPost" style="margin-right: 30px;">继续发布商品</router-link>
				<router-link to="/base/goods/seller/goods">查看商品</router-link>
			</div>
		</el-dialog>
		<template-freight ref="templatefre" whichType="addTransport" @success="addsuccess"></template-freight>
	</basic-container>
</template>
<script>
	import {
		getGoodsBrand, //请求商品分类接口
		loadClassSpec,
		getStoreCate,
		getsupplierlist,
		gettemplateFre,
		submitdata,
		getProductdata
	} from '@/api/base/goods/addGoods';
	import { viewTemplate } from '@/api/base/store/seller/transport';
	import selFile from '@/components/file/selFile';
	import changeGoodsClass from '@/components/goods/seller/changeGoodsClass';
	import goodsClass from '@/views/base/goods/seller/goodsClass';
	import editor from '@/components/editor/richTextEditor';
	import templateFreight from '@/components/goods/seller/templateFreight';
	import { testPirce, testGoodsWidth, testGoodsSerial, testGoodsSort, testGoodsInventory } from '@/util/util';

	export default {
		name: 'addGoods',
		props: {
			isPublish: {
				//是否发布
				type: Boolean,
				default() {
					return true;
				}
			},
			isCheck: {
				//是否查看
				type: Boolean,
				default() {
					return false;
				}
			},
			isRedact: {
				//是否编辑
				type: Boolean,
				default() {
					return false;
				}
			},
			disadledSpec: {
				type: Boolean,
				default() {
					return false;
				}
			},
			goodsId: {
				type: String
			}
		},
		components: {
			changeGoodsClass,
			selFile,
			goodsClass,
			editor,
			templateFreight
		},
		computed: {
			goodsVolume() {
				//计算体积
				let tj = null;
				if (this.groupData['goodsLength'] != null && this.groupData['goodsWidth'] != null && this.groupData['goodsHeight'] != null) {
					tj = (this.groupData['goodsLength'] * this.groupData['goodsWidth'] * this.groupData['goodsHeight']) / 1000;
					tj = tj.toFixed(2);
				}
				return tj;
			}
		},
		data() {
			return {
				isEditFirst:true,//是否是刚刚打开编辑界面，用来回显运费模板
				isDisabled: false,
				transType: '', //运费模板类型
				storeId: '',
				goodsStoreId:"",//商品所在的店铺id
				submitLoading: false,
				avueformRules: {},
				editorshow: false,
				cabackcontent: '',
				cabackcontenth5: '',
				checked: true,
				goodsclassname: '',
				dialogSuccessVisible: false,
				dialogTableVisible: false, //选择商品分类弹窗
				goodsClassId: null, //商品分类id
				value: [],
				cascaderoptions: [],
				optionView: {
					//表单组配置
					card: true,
					size: 'mini',
					mock: false,
					submitBtn: false,
					emptyBtn: false,
					menuPostion: 'right',
					labelWidth: '100',
					group: [
						{
							prop: 'group1'
						},
						{
							label: '基本信息',
							prop: 'group2',
							column: [
								{
									disabled: this.isCheck,
									label: '商品名称',
									prop: 'goodsName',
									formslot: false,
									maxlength: 50,
									required: true,
									tip: '商品标题名称长度至少1个字符，最长50个汉字',
									tipPlacement: 'bottom',
									span: 12,
									rules: [{ required: true, message: '必须填写商品名称', trigger: 'blur' }]
								},
								{
									disabled: this.isCheck,
									label: '商品品牌',
									prop: 'goodsBrandId',
									type: 'select',
									formslot: false,
									dicData: [],
									required: true
								},
								{
									disabled: this.isCheck || this.disadledSpec,
									type: 'radio',
									label: '商品类型',
									span: 24,
									display: true,
									prop: 'choiceType',
									tipPlacement: 'right',
									dicData: [
										{
											label: '实物商品',
											value: 0
										},

									]
								},
								{
									label: '商品图片',
									prop: 'goodsPhotos',
									formslot: true,
									span: 24,
									rules: [{ required: true, message: '必须选择商品图片' }]
								},
								{
									label: '商品视频',
									prop: 'goodsVideo',
									formslot: true,
									span: 24
								}
							]
						},
						{
							prop: 'group3',
							label: '自然属性',
							column: []
						},
						{
							prop: 'group4',
							label: '销售属性',
							column: [
								{
									disabled: this.isCheck || this.disadledSpec,
									type: 'radio',
									label: '库存配置',
									span: 13,
									display: true,
									prop: 'inventoryType',
									tip: '全局配置表示所有规格无单独库存、价格配置 规格配置需要配置对应属性的库存、价格',
									tipPlacement: 'right',
									dicData: [
										{
											label: '全局配置',
											value: 'all'
										},
										{
											label: '规格配置',
											value: 'spec'
										}
									]
								},
								{
									label: '商品编号',
									disabled: this.isCheck,
									prop: 'goodsSerial',
									formslot: false,
									maxlength: 50,
									required: true,
									display: true,
									tip: '商品编号是指卖家个人管理商品的编号，买家不可见 最多可输入50个字符，支持输入中文、字母、数字、_、/、-和小数点',
									tipPlacement: 'right',
									span: 13,
									rules: [
										{ required: true, message: '必须填写商品编号' },
										{ required: true, trigger: 'blur', validator: testGoodsSerial }
										// testGoodsSerial
									]
								},
								{
									label: '商品库存',
									disabled: this.isCheck,
									prop: 'goodsInventory',
									type: 'input',
									minRows: 0,
									formslot: false,
									maxlength: 50,
									required: true,
									display: true,
									tip: '商品库存数量只能是0-1000000之间的整数',
									tipPlacement: 'right',
									span: 13,
									rules: [{ required: true, message: '必须填写商品库存' }, { required: true, trigger: 'blur', validator: testGoodsInventory }]
								},
								{
									disabled: this.isCheck,
									label: '价格',
									prop: 'price',
									type: 'input',
									precision: 2,
									minRows: 0.01,
									formslot: false,
									maxlength: 50,
									required: true,
									display: true,
									tip: '价格必须是0.01-99999999.99之间的数字',
									tipPlacement: 'right',
									span: 13,
									rules: [{ required: true, message: '必须填写商品价格' }, { required: true, trigger: 'blur', validator: testPirce }]
								},
								{
									disabled: this.isCheck,
									label: '原价',
									prop: 'originalPrice',
									type: 'input',
									minRows: 0,
									precision: 2,
									formslot: false,
									maxlength: 50,
									required: true,
									display: true,
									tip: '价格必须是0.01-99999999.99之间的数字',
									tipPlacement: 'right',
									span: 13,
									rules: [{ required: true, message: '必须填写商品原价' }, { required: true, trigger: 'blur', validator: testPirce }]
								},
								{
									disabled: this.isCheck,
									label: '进货价',
									prop: 'purchasePrice',
									type: 'input',
									precision: 2,
									minRows: 0,
									formslot: false,
									maxlength: 50,
									required: true,
									display: true,
									tip: '价格必须是0.01-99999999.99之间的数字',
									tipPlacement: 'right',
									span: 13,
									rules: [{ required: true, message: '必须填写商品进货价' }, { required: true, trigger: 'blur', validator: testPirce }]
								},
								{
									prop: 'goodsSpecConfig',
									formslot: true,
									display: false,
									span: 24
								},
								{
									disabled: this.isCheck,
									type: 'radio',
									display: true,
									span: 24,
									label: '药品',
									prop: 'isDrugs',
									dicData: [
										{
											label: '否',
											value: 0
										},
										{
											label: '是',
											value: 1
										}

									]
								},
								{
									disabled: this.isCheck,
									type: 'radio',
									display: false,
									span: 24,
									label: '处方药',
									prop: 'isPrescription',
									dicData: [
										{
											label: '非处方药',
											value: 0
										},
										{
											disabled:true,
											label: '处方药',
											value: 1
										}

									]
								},
							]
						},
						{
							prop: 'group5',
							label: '店铺分类',
							column: [
								{
									prop: 'userGoodsClassId',
									label: '本店分类',
									formslot: true,
									display: true
								}
							]
						},
						{
							prop: 'group6',
							label: '物流信息',
							column: [
								{
									//disabled: this.isCheck,
									type: 'radio',
									display: true,
									span: 24,
									label: '供货方式',
									prop: 'isSelfSupply',
									dicData: [

										{
											label: '供货商',
											value: 1,
											check:true
										}
									]
								},
								{
									label: '供货商',
									disabled: this.isCheck,
									formslot: false,
									display: false,
									span: 12,
									prop: 'supplierId',
									type: 'select',
									dicData: []
								},
								{
									label: '运费模板',
									formslot: true,
									display: true,
									span: 12,
									prop: 'transportId'
								},
								{
									display: true,
									label: '商品属性',
									prop: 'productsize',
									formslot: true,
									span: 24
								}
							]
						},
						{
							prop: 'group7',
							label: '详情描述',
							column: [
								{
									disabled: this.isCheck,
									label: 'PC商品描述',
									formslot: true,
									labelWidth: '130',
									span: 24,
									prop: 'goodsDetails',
									rules: [{ required: true, message: '必须填写PC商品描述' }]
								},

								{
									disabled: this.isCheck,
									label: 'H5商品描述',
									formslot: true,
									labelWidth: '130',
									span: 24,
									prop: 'goodsDetailsH5',
									rules: [{ required: true, message: '必须填写H5商品描述' }]
								}
							]
						},
						{
							prop: 'group8',
							label: '其他信息',
							column: [
								//商品发布页面的商品推荐是店铺推荐storeRecommend
								{
									disabled: this.isCheck,
									type: 'radio',
									display: true,
									span: 24,
									label: '商品推荐',
									prop: 'storeRecommend',
									dicData: [
										{
											label: '是',
											value: 1
										},
										{
											label: '否',
											value: 0
										}
									]
								},
								{
									disabled: this.isCheck,
									label: '商品权重',
									prop: 'goodsSort',
									formslot: false,
									required: true,
									tip: '权重越小越靠前，最大不超过999',
									tipPlacement: 'right',
									span: 12,
									rules: [{ required: true, message: '必须填写商品权重' }, { required: true, trigger: 'blur', validator: testGoodsSort }]
								}
							]
						}
					]
				},
				goodsClassSpecIds: [], //商品分类id
				templateFreightData: [], //运费模板列表
				storeCateData: [], //店铺分类
				tablelistdata: [], //表格数据
				tabledata: [],
				isFill: false, //是否填充
				parentindex: 0, //选中数据在父级中的下标定位
				childrenindex: 0, //选中数据在当前下标定位
				specSelectData: [],
				productBrandData: [], //商品品牌分类数据
				activeIndex: '0', //导航当前点击下标
				naturalSpecList: [], //自然属性列表
				saleSpecList: [], //销售属性列表
				groupData: {
					//整个商品发布from表单双向绑定数据
					goodsName: '', //商品名称
					goodsBrandId: '', //商品品牌
					choiceType: 0, //商品类型
					goodsPhotos: [], //商品图片
					goodsVideo: [], //商品视频
					goodsPropertyIds: [], //商品自然属性
					inventoryType: 'all', //库存配置 全局配置all   规格配置为spec
					goodsSerial: '', //商品编号
					isDrugs: 0, //是否是药品
					isPrescription: 0, //是否是处方药
					value: '', //商品规格
					goodsInventory: '', //商品库存
					price: null, //商品价格
					originalPrice: null, //商品原价
					purchasePrice: null, //商品进货价
					userGoodsClassId: '', //店铺分类id
					supplierId: null, //供货商id
					isSelfSupply: 0, //供货方式
					transportId: null, //运费模板
					goodsLength: null, //长度
					goodsWidth: null, //宽度
					goodsHeight: null, //高度
					goodsWeight: null, //重量
					goodsVolumeWeight: null, //体积重量
					storeRecommend: 1, //是否推荐
					goodsSort: null, //商品权重
					goodsDetails: '', //商品详情
					goodsDetailsH5: '' //商品详情H5
				},
				prospec: {
					goodsInventory: '', //填充库存
					price: '', //填充售卖价格
					originalPrice: '', //填充商品原价
					purchasePrice: '', //填充商品进货价
					goodsSerial: '' //填充商品编码
				},
				groupHeights: [],
				goodsWidthRules: {
					goodsWidth: [
						{
							required: true,
							validator: testGoodsWidth,
							trigger: 'blur'
						}
					]
				}
			};
		},
		watch: {
			tabledata(val) {
				console.log(val);
			},
			'groupData.inventoryType'(val) {
				var column1 = this.optionView.group[3].column[1];
				var column2 = this.optionView.group[3].column[2];
				var column3 = this.optionView.group[3].column[3];
				var column4 = this.optionView.group[3].column[4];
				var column5 = this.optionView.group[3].column[5];
				var column6 = this.optionView.group[3].column[6];
				if (val === 'spec') {
					column1.display = false;
					column2.display = false;
					column3.display = false;
					column4.display = false;
					column5.display = false;
					column6.display = true;
				} else {
					column1.display = true;
					column2.display = true;
					column3.display = true;
					column4.display = true;
					column5.display = true;
					column6.display = false;
				}
			},
			'groupData.isSelfSupply'(val) {
				var column = this.optionView.group[5].column[1];
				//切换状态是重置原来选中的运费模板
				this.groupData.transportId = '';
				if (val == 0) {
					column.display = false;
					this.gettemplateFre('');
				} else {
					column.display = true;
					this.groupData.supplierId = '';
					this.templateFreightData = [];
				}
			},
			'groupData.supplierId'(val) {
				if (val != '') {
					//当时是编辑界面时，并且是第一次打开时，不置空运费模板id,其他情况切换供货商就置空运费模板id
					if(!this.isPublish && this.isEditFirst ){
						this.isEditFirst=false;
					}else{
						this.groupData.transportId='';
					}
					this.gettemplateFre(val);
				}
			},
			'groupData.choiceType'(val) {
				var column = this.optionView.group[5].column[2];
				var columnAttributes = this.optionView.group[5].column[3];
				if (val == '0') {
					//实物商品    显示运费模板,商品属性
					column['display'] = true;
					columnAttributes['display'] = true;
				} else {
					//虚拟商品   隐藏运费模板,商品属性
					column['display'] = false;
					columnAttributes['display'] = false;
					this.groupData.transportId = '';
				}
			},
			'dialogTableVisible'() {
				if(!this.dialogTableVisible){
					this.cascaderoptions=[]
					this.getStoreCate()
				}
			},
			'groupData.isDrugs'(val) {
				var column = this.optionView.group[3].column[8];
				if(val == 1){
					column['display'] = true;
				}else{
					column['display'] = false;
				}
			},
		},
		created() {
			this.$EventBus.$on('scrollTop',()=>{
				// console.log(this.$refs.contentScroll.scrollTop);
				// this.activeIndex = '0'
				// this.$refs.contentScroll.scrollTop = 0;
			});
			if (this.isPublish) {
				this.editorshow = true;
			} else {
				this.editorshow = false;
			}
			// //加载供货商列表
			this.getsupplierlist();
			//加载运费模板 自供货状态下
			this.gettemplateFre();
			//如果是商品发布或者商品编辑  请求商品分类数据
			if (this.goodsId !== undefined) {
				//根据商品id请求数据
				getProductdata(this.goodsId).then(res => {
					if (res.data.code == 200) {
						let data = res.data.data;
						this.goodsStoreId=data.showData.storeId;
						console.log(data);
						let arr = [
							data.showData.allExceptSpecList[0].goodsClassOutName,
							data.showData.allExceptSpecList[0].goodsClassInChildName,
							data.showData.allExceptSpecList[0].goodsClassInnerChildName
						];
						this.goodsclassname = arr.join('>>'); //商品类目
						this.goodsClassId = data.showData.allExceptSpecList[0].goodsClassInnerChildId;
						this.groupData.goodsName = data.showData.goodsName; //显示商品名称
						//得到商品分类id去请求商品品牌数据
						this.getGoodsBrand(this.goodsClassId);
						// //获取店铺分类
						//this.getStoreCate();
						//加载运费模板 自供货状态下
						this.groupData.inventoryType = data.showData.inventoryType; //商品配置  全局  规格
						this.gettemplateFre();
						if (data.showData.inventoryType == 'all') {
							this.groupData.goodsInventory = data.showData.skuTableInfo[0].goodsInventory;
							this.groupData.goodsSerial = data.showData.skuTableInfo[0].goodsSerial;
							this.groupData.originalPrice = data.showData.skuTableInfo[0].originalPrice;
							this.groupData.price = data.showData.skuTableInfo[0].price;
							this.groupData.purchasePrice = data.showData.skuTableInfo[0].purchasePrice;
						} else {
							//筛选销售属性选中数据
							this.specSelectData = data.showData.gsptyInfoList.filter(item => {
								//销售属性选中数据
								if (item.specpType == 0) return item;
							});
							//获取全部销售属性
							let allSaleSpec = data.allSpecInfo.filter(item => {
								//销售属性
								if (item.specType == 0) return item;
							});
							//设置销售属性选中状态
							allSaleSpec.forEach(item => {
								item.childrenNodes.forEach(prop => {
									this.specSelectData.forEach((item) => {
										if (item["id"] == prop["id"]) {
											prop.isselected = true;
											prop.specImageUrl=item["specImageUrl"];
											prop.specpValue=item["specpValue"];
										}
									})
								});
							});
							//销售属性选中数据
							this.saleSpecList = allSaleSpec;
							//封装tablelistData
							this.saleSpecList.forEach(item => {
								let arr = item.childrenNodes.filter(prop => {
									if (this.arrayFn.constansObjByKey(this.specSelectData, prop, 'id')) {
										return prop;
									}
								});
								if (arr.length > 0) {
									this.tablelistdata = this.arrayFn.insertAndUpdateObjByKey(
											this.tablelistdata,
											{
												specdata: arr,
												specId: item.id
											},
											'specId'
									);
								}
							});
							//生成规格表格
							this.generateTable();
							this.tabledata.forEach(item => {
								data.showData.skuTableInfo.forEach((prop, idx) => {
									if (this.isTrue(item.ids.split('_'), prop.ids.split('_'))) {
										this.$nextTick(() => {
											this.tabledata[idx]['goodsInventory'] = prop.goodsInventory;
											this.tabledata[idx]['goodsSerial'] = prop.goodsSerial;
											this.tabledata[idx]['originalPrice'] = prop.originalPrice;
											this.tabledata[idx]['price'] = prop.price;
											this.tabledata[idx]['purchasePrice'] = prop.purchasePrice;
										});
									}
								});
							});
						}
						this.groupData.transportId = data.showData.allExceptSpecList[2].transportId;
						this.groupData.supplierId = data.showData.allExceptSpecList[3].supplierId;
						if (this.groupData.supplierId) {
							this.groupData.isSelfSupply = 1;
							this.getsupplierlist();
							this.gettemplateFre(this.groupData.supplierId);
							setTimeout(() => {
								this.groupData.supplierId = data.showData.allExceptSpecList[3].supplierId;
								this.groupData.transportId = data.showData.allExceptSpecList[2].transportId;
							}, 100);
						} else {
							this.groupData.isSelfSupply = 0;
						}
						this.groupData.choiceType = data.showData.choiceType;
						this.groupData.goodsPhotos = data.showData.goodsPhotos; //图片
						this.groupData.goodsVideo = data.showData.goodsVideos; //视频
						this.groupData.goodsLength = data.showData.goodsLength; //长
						this.groupData.goodsWidth = data.showData.goodsWidth; //宽
						this.groupData.goodsHeight = data.showData.goodsHeight; //高
						this.groupData.goodsWeight = data.showData.goodsWeight; //重量
						this.groupData.goodsBrandId = data.showData.allExceptSpecList[1].brandId; //商品品牌
						this.cabackcontent = data.showData.goodsDetails;
						this.cabackcontenth5 = data.showData.goodsDetailsH5;
						this.groupData.goodsSort = data.showData.goodsSort;
						this.groupData.storeRecommend = Number(data.showData.storeRecommend);
						this.editorshow = true;
						if (data.showData.userGoodsClass != undefined && data.showData.userGoodsClass != '' && data.showData.userGoodsClass != null) {
							let storearr = [];
							storearr.push(data.showData.userGoodsClass.id, data.showData.userGoodsClass.children[0].id);
							this.value = storearr;
						}

						//获取所有自然属性
						this.naturalSpecList = data.allSpecInfo.filter(item => {
							//自然属性
							if (item.specType == 1) return item;
						});
						if (this.isCheck) {
							this.handleNature(true);
						} else {
							this.handleNature(true);
						}
						//显示的自然属性
						let gsptyInfoList = [];
						if(data.showData.gsptyInfoList){
							gsptyInfoList = data.showData.gsptyInfoList.filter(item => {
								//销售属性
								if (item.specpType == 1) return item;
							});
						}

						//设置自然属性的回显
						this.naturalSpecList.forEach((item, index) => {
							gsptyInfoList.forEach(prop => {
								if (item.id == prop.specId) {
									this.groupData[`naturalSelData${index}`] = gsptyInfoList[index].id;
								}
							});
						});
						console.log(this.groupData);
					}
				});
			}
		},
		methods: {
			addsuccess() {
				console.log(`添加运费模成功`);
				this.gettemplateFre(this.groupData.supplierId);
			},
			contentScroll() {
				let scrollTopNum = this.$refs.contentScroll.scrollTop;
				let doms = document.getElementsByClassName('avue-group');
				if (scrollTopNum >= 0 && scrollTopNum < doms[1].offsetTop) {
					this.activeIndex = '0';
				} else if (scrollTopNum >= doms[1].offsetTop && scrollTopNum < doms[2].offsetTop) {
					this.activeIndex = '1';
				} else if (scrollTopNum >= doms[2].offsetTop && scrollTopNum < doms[3].offsetTop) {
					this.activeIndex = '2';
				} else if (scrollTopNum >= doms[3].offsetTop && scrollTopNum < doms[4].offsetTop) {
					this.activeIndex = '3';
				} else if (scrollTopNum >= doms[4].offsetTop && scrollTopNum < doms[5].offsetTop) {
					this.activeIndex = '4';
				} else if (scrollTopNum >= doms[5].offsetTop && scrollTopNum < doms[6].offsetTop) {
					this.activeIndex = '5';
				} else if (scrollTopNum >= doms[6].offsetTop && scrollTopNum < doms[7].offsetTop) {
					this.activeIndex = '6';
				}
			},
			keepOnPost() {
				//强制刷新页面
				this.$router.go(0);
			},
			// 判断两个数组是否相等
			isTrue(arr, arr1) {
				if (arr.length !== arr1.length) {
					return false;
				}
				for (let i = 0; i < arr.length; i++) {
					const item = arr[i];
					const item1 = arr1[i];
					if (item['op'] !== item1['op']) {
						return false;
					}
				}
				return true;
			},
			/**
			 * 请求数据相关方法
			 */
			//获取商品品牌
			getGoodsBrand(goodsClassId) {
				getGoodsBrand(goodsClassId).then(res => {
					if (res.data.code == 200) {
						this.productBrandData = [];
						let brand = res.data.data;
						brand.forEach(item => {
							this.productBrandData.push(new Object({ value: item.id, label: item.brandName }));
						});
						this.optionView.group[1].column[1].dicData = this.productBrandData;
					}
				});
			},
			//获取商品属性
			loadClassSpec(goodsClassId) {
				loadClassSpec(goodsClassId).then(res => {
					//在这里过滤出来销售属性和商品属性
					if (res.data.code == 200) {
						//自然属性1  销售属性0
						let data = res.data.data;
						this.naturalSpecList = data.filter(item => {
							//自然属性
							if (item.specType == 1) return item;
						});
						this.saleSpecList = data.filter(item => {
							//销售属性
							if (item.specType == 0) return item;
						});
						this.saleSpecList.forEach(item => {
							item.childrenNodes.forEach(p => {
								p.isselected = false;
							});
						});
						this.handleNature(false);
					}
				});
			},
			handleNature(bool = false) {
				this.naturalSpecList = this.naturalSpecList.map(item => {
					let arr = item.childrenNodes.map(prop => {
						return {
							label: prop.specpValue,
							value: prop.id
						};
					});
					return {
						specName: item.specName,
						id: item.id,
						childrenNodes: arr
					};
				});
				//配置自然属性option
				let group = this.optionView.group[2];
				group.column = [];
				this.naturalSpecList.forEach((item, index) => {
					group.column.push({
						type: 'select',
						label: item.specName,
						dicData: item.childrenNodes,
						suffixIcon: 'el-icon-tickets',
						prefixIcon: 'el-icon-tickets',
						span: 13,
						display: true,
						disabled: bool,
						prop: 'naturalSelData' + index
					});
					this.groupData[`naturalSelData${index}`] = '';
				});
			},

			//获取店铺分类数据
			getStoreCate() {
				getStoreCate(this.storeId).then(res => {
					if (res.data.code == 200) {
						let data = res.data.data;
						data.forEach(item => {
							let obj = {};
							obj.value = item.id;
							obj.label = item.className;
							obj.children = [];
							item.children.forEach(prop => {
								let clilobj = {};
								clilobj.value = prop.id;
								clilobj.label = prop.className;
								obj.children.push(clilobj);
							});
							this.cascaderoptions.push(obj);
						});
					}
				});
			},
			//加载供货商列表
			getsupplierlist() {
				getsupplierlist(this.goodsStoreId).then(res => {
					if (res.data.code == 200) {
						this.storeId = res.data.data[0].storeId;
						//获取店铺分类
						this.getStoreCate();
						this.optionView.group[5].column[1].dicData = res.data.data.map(item => {
							return { label: item.title, value: item.id };
						});
						//供货商列表
						this.supplierlist = res.data.data.map(item => {
							return { label: item.title, value: item.id };
						});
					}
				});
			},
			//获取运费模板列表
			gettemplateFre(supplierId = '') {
				gettemplateFre(supplierId,this.goodsStoreId).then(res => {
					if (res.data.code == 200) {
						this.templateFreightData = res.data.data;
					}
				});
			},

			//获取运费模板详情
			// viewTemplate(id) {
			// 	viewTemplate(id).then((res) => {
			// 		if (res.data.code == 200) {
			// 			console.log(res.data.data)
			// 			var transType = res.data.data.transType
			// 			if(transType == 1) {
			// 				if (!this.groupData.goodsWeight) {
			// 					this.$message.error("商品重量不能为空");
			// 					return;
			// 				}
			// 			}else if(transType == 2) {
			// 				if (this.goodsVolume == '') {
			// 					this.$message.error("商品体积不能为空");
			// 					return;
			// 				}
			// 			}
			// 		}
			// 	})
			// },
			/**
			 * 处理页面数据逻辑相关
			 */
			changeclassdata(val) {
				//选择分类回调方法，携带分类id
				this.prospec = {
					goodsInventory: '', //填充库存
					price: '', //填充售卖价格
					originalPrice: '', //填充商品原价
					purchasePrice: '', //填充商品进货价
					goodsSerial: '' //填充商品编码
				};
				this.productBrandData = [];
				this.groupData.goodsBrandId = '';
				this.tabledata = [];
				this.specSelectData = [];
				this.tablelistdata = [];
				this.goodsClassSpecIds = val.goodsClassSpecIds;
				this.goodsclassname = val.str;
				this.goodsClassId = val.code;
				//得到商品分类id去请求商品品牌数据
				this.getGoodsBrand(val.code);
				//获取商品属性
				this.loadClassSpec(val.code);
			},
			handleSelect(el) {
				this.activeIndex = el;
				let scrollDom = document.getElementsByClassName('scrollView')[0];
				let doms = document.getElementsByClassName('avue-group');
				scrollDom.scrollTop = doms[el].offsetTop+2;
			},
			chooseCategory() {
				//控制选择类目弹窗
				this.$refs.changeGoods.open();
			},
			uploadbtn() {
				//上传图片
				this.$refs.selFile.open();
			},
			selFileCallBack(data) {
				console.log(data);
				let len = data.length;
				let viewLen = this.groupData.goodsPhotos.length;
				console.log(viewLen);
				//选中图片传回的数据
				//最多上传5张照片
				if (len <= 5 - viewLen) {
					this.groupData.goodsPhotos = this.groupData.goodsPhotos.concat(data);
				} else {
					this.$message({
						type: 'warning',
						message: '最多可上传5张图片'
					});
					// this.groupData.goodsPhotos = data;
				}
			},
			uploadVideoBtn() {
				this.$refs.selVideo.open();
			},
			//选择视频回调
			selVideoCallBack(data) {
				//最多上传1个视频
				if (data.length > 1) {
					this.$message({
						type: 'warning',
						message: '最多可上传1个视频'
					});
					return;
				} else {
					this.groupData.goodsVideo = data;
				}
				console.log(this.groupData.goodsVideo);
			},
			//处理上传图片部分js
			arrowLeft(idx) {
				console.log(this.groupData.goodsPhotos);
				//左移动
				if (idx == 0) {
					this.$message.warning('已经第一张了');
				} else {
					let arritem = this.groupData.goodsPhotos.splice(idx, 1);
					this.groupData.goodsPhotos.splice(idx - 1, 0, ...arritem);
				}
			},
			arrowRight(idx) {
				//右移动
				if (idx == this.groupData.goodsPhotos.length - 1) {
					this.$message.warning('已经最后一张了');
				} else {
					let arritem = this.groupData.goodsPhotos.splice(idx, 1);
					this.groupData.goodsPhotos.splice(idx + 1, 0, ...arritem);
				}
			},
			arrowDel(idx) {
				//删除
				this.groupData.goodsPhotos.splice(idx, 1);
			},
			//删除已上传视频
			videoDel(idx) {
				//删除
				this.groupData.goodsVideo.splice(idx, 1);
			},

			choosePic(index, idx) {
				this.parentindex = index;
				this.childrenindex = idx;
				//选择规格图片
				this.$refs.specimg.open();
			},
			specChooseimg(url) {
				//选择规格图片返回的图片链接数据
				this.saleSpecList[this.parentindex].childrenNodes[this.childrenindex].specImageUrl = url[0];
			},
			arrsort(property) {
				return (a, b) => {
					var val1 = a[property];
					var val2 = b[property];
					return val1 - val2;
				};
			},
			handleCheckedChange(index, idx, id, checked) {
				//复选框变化触发事件
				console.log(this.prospec);
				this.prospec = {
					goodsInventory: '', //填充库存
					price: '', //填充售卖价格
					originalPrice: '', //填充商品原价
					purchasePrice: '', //填充商品进货价
					goodsSerial: '' //填充商品编码
				};
				console.log(this.prospec);
				this.parentindex = index;
				this.childrenindex = idx;
				if (checked == true) {
					this.specSelectData = this.arrayFn.insertAndUpdateObjByKey(this.specSelectData, this.saleSpecList[this.parentindex].childrenNodes[this.childrenindex], 'id');
				} else {
					this.specSelectData = this.arrayFn.removeObjByKey(this.specSelectData, this.saleSpecList[this.parentindex].childrenNodes[this.childrenindex], 'id');
				}
				console.log(this.specSelectData);
				this.saleSpecList[this.parentindex].childrenNodes = this.saleSpecList[this.parentindex].childrenNodes.map(item => {
					if (this.arrayFn.constansObjByKey(this.specSelectData, item, 'id')) {
						//对象被选中
						item.isselected = true;
					} else {
						item.isselected = false;
					}
					return item;
				});
				let arr = this.specSelectData.filter(item => {
					return item.specId == id;
				});
				if (arr.length > 0) {
					this.tablelistdata = this.arrayFn.insertAndUpdateObjByKey(
							this.tablelistdata,
							{
								specdata: arr,
								specId: id
							},
							'specId'
					);
				} else {
					this.tablelistdata = this.arrayFn.removeObjByKey(
							this.tablelistdata,
							{
								specdata: arr,
								specId: id
							},
							'specId'
					);
				}
				this.generateTable();
			},
			generateTable() {
				//生成sku表格
				this.tabledata = [];
				let trData = [];
				this.tablelistdata.sort(this.arrsort('specId'));
				if (this.tablelistdata.length > 0) {
					trData = this.generateTable2(trData, '', '', 0);
				}
				if (this.isFill) {
					//已经填充过属性
					trData.forEach(item => {
						for (let prop in item) {
							if (prop == 'value' || prop == 'ids') {
								continue;
							} else {
								item[prop] = this.prospec[prop];
							}
						}
					});
					this.tabledata = trData;
				} else {
					this.tabledata = trData;
				}
			},
			generateTable2(trData, ggName, id, index) {
				//递归生成sku表格
				if (this.tablelistdata.length - 1 <= index) {
					this.tablelistdata[index].specdata.forEach(item => {
						var _ggName;
						var ids;
						if (ggName == '' || id == '') {
							_ggName = item.specpValue;
							ids = item.id;
						} else {
							_ggName = ggName + ',' + item.specpValue;
							ids = id + '_' + item.id;
						}
						var tr = {};
						tr.value = _ggName;
						tr.ids = ids;
						tr.goodsInventory = ''; //商品库存
						tr.price = ''; //商品售卖价格
						(tr.purchasePrice = ''), //进货价
								(tr.originalPrice = ''), //原价
								(tr.goodsSerial = ''), //商品编号
								trData.push(tr);
					});
					return trData;
				} else {
					this.tablelistdata[index].specdata.forEach(item => {
						var _ggName;
						var ids;
						if (ggName == '') {
							_ggName = item.specpValue;
							ids = item.id;
						} else {
							_ggName = ggName + ',' + item.specpValue;
							ids = id + '_' + item.id;
						}
						trData = this.generateTable2(trData, _ggName, ids, index + 1);
					});
					return trData;
				}
			},
			confirmFill() {
				//确认填充
				if (this.tabledata.length == 0) {
					this.$message({
						type: 'warning',
						message: '没有可以被填充的规格！'
					});
					return;
				}

				//当商品库存不为空时，校验商品库存的输入是否合法
				if (this.prospec.goodsInventory != '') {
					//商品库存可以为0
					if (this.prospec.goodsInventory != 0) {
						if (!Number(this.prospec.goodsInventory)) {
							this.$message.error('商品库存数量只能是0-1000000之间的整数');
							return;
						} else {
							const re = /^[0-9]*$/;
							const rsCheck = re.test(this.prospec.goodsInventory);
							if (!rsCheck) {
								this.$message.error('商品库存数量只能是0-1000000之间的整数');
								return;
							} else {
								if (this.prospec.goodsInventory < 0 || this.prospec.goodsInventory > 1000000) {
									this.$message.error('商品库存数量只能是0-1000000之间的整数');
									return;
								}
							}
						}
					} else {
						this.prospec.goodsInventory = 0;
					}
				}
				//当商品价格不为空时，校验输入的价格是否合法
				if (this.prospec.price != '') {
					if (!this.testPriceMethod(this.prospec.price)) {
						this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
						return;
					} else {
						if (this.prospec.price == 0) {
							this.prospec.price = 0.00;
						}
					}
				}
				//当商品原价不为空时，检验输入的商品原价是否合法
				if (this.prospec.originalPrice) {
					if (!this.testPriceMethod(this.prospec.originalPrice)) {
						this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
						return;
					} else {
						if (this.prospec.originalPrice == 0) {
							this.prospec.originalPrice = 0.00;
						}
					}
				}
				//当商品进货价不为空时，检验输入的商品进货价是否合法
				if (this.prospec.purchasePrice) {
					if (!this.testPriceMethod(this.prospec.purchasePrice)) {
						this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
						return;
					} else {
						if (this.prospec.purchasePrice == 0) {
							this.prospec.purchasePrice = 0.00;
						}
					}
				}

				//当商品编号不为空时，检验输入的商品编号是否合法
				if (this.prospec.goodsSerial) {
					// 商品编号也可以为0
					if (this.prospec.goodsSerial != 0) {
						if (!this.prospec.goodsSerial) {
							this.$message.error('商品编号输入不可以为空');
							return;
						} else {
							let newValue = this.prospec.goodsSerial.replace(/\s*/g, '');
							const re = /^[A-Za-z0-9-_\./\u4e00-\u9fa5]{0,50}$/;
							const rsCheck = re.test(newValue);
							if (!rsCheck) {
								this.$message.error('商品编号最多为50个字符');
								return;
							} else {
								this.prospec.goodsSerial = newValue;
							}
						}
					}
				}

				this.tabledata.forEach(item => {
					for (let prop in item) {
						if (prop == 'value' || prop == 'ids') {
							continue;
						} else {
							item[prop] = this.prospec[prop];
						}
					}
				});
				this.$message({
					type: 'success',
					message: '填充成功！'
				});
			},
			//校验价格
			testPriceMethod(value) {
				let flagTest = false;
				if (value != 0) {
					if (!Number(value)) {
						flagTest = false;
					} else {
						const re = /^(0|[1-9][0-9]{0,9})(\.[0-9]{1,2})?$/;
						const rsCheck = re.test(value);
						if (!rsCheck) {
							flagTest = false;
						} else {
							if (value < 0.01 || value > 99999999.99) {
								flagTest = false;
							} else {
								flagTest = true;
							}
						}
					}
				} else {
					flagTest = true;
				}
				return flagTest;
			},

			//校验输入的长，宽，高，重量
			testPropertyMethod(value) {
				let flagPropertyTest = false;

				if (!value) {
					flagPropertyTest = false;
				} else {
					if (!Number(value)) {
						flagPropertyTest = false;
					} else {
						// const re = /^(?!00)(?:[0-9]{1,3}|1000)$/;
						//  const rsCheck = re.test(value);
						//  if (!rsCheck) {
						//      flagPropertyTest = false;
						//  } else {
						//      flagPropertyTest = true;
						//  }
						if (0 < value && value < 1000) {
							flagPropertyTest = true;
						} else {
							flagPropertyTest = false;
						}
					}
				}
				return flagPropertyTest;
			},

			//新增店铺分类
			goodsClassOpen() {
				this.dialogTableVisible = true;
				return false;
			},
			//新增运费模板
			templateFreightHandle() {
				this.$refs.templatefre.open();
			},
			//商品详情pc
			getEditcont(val) {
				this.groupData.goodsDetails = val;
			},
			//商品详情h5
			getEditconth5(val) {
				this.groupData.goodsDetailsH5 = val;
			},
			//提交时再次效验表单
			validateForm() {
				let flag = false;
				this.$refs.obj.validate(valid => {
					if (valid) {
						flag = true;
					}
				});
				return flag;
			},
			getTransType(id){
				//获取运费模板详情
				viewTemplate(id).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.transType = res.data.data.transType;
					}
				});
			},
			handleSubmit() {
				this.submitLoading = true;
				setTimeout(() => {
					this.submitLoading = false;
				}, 1000);
				//选择商品分类
				if (this.goodsclassname == '') {
					this.$message.error('请选择商品分类');
					return;
				}
				if (this.groupData.goodsPhotos.length == 0) {
					this.$message.error('最少上传一张图片');
					return;
				}
				if (this.groupData.choiceType == 0 && (this.groupData.transportId == '' || this.groupData.transportId == null)) {
					this.$message.error('运费模板不能为空');
					return;
				} else if(this.transType == 1&& this.groupData.goodsWeight==null){
					//根据运费模板判断商品属性是否必填
					this.$message.error('商品重量不能为空');
					return;
				}else if (this.transType == 2&&this.goodsVolume == null) {
					this.$message.error('商品体积不能为空');
					return;
				}
				//H5描述不能为空，
				if (this.groupData.goodsDetails == '' || this.groupData.goodsDetails == null || this.groupData.goodsDetails == undefined) {
					this.$message.error('PC商品描述不能为空');
					return;
				}

				if (this.groupData.goodsDetailsH5 == '' || this.groupData.goodsDetailsH5 == null || this.groupData.goodsDetailsH5 == undefined) {
					this.$message.error('H5商品描述不能为空');
					return;
				}
				//商品权重
				if (this.groupData.goodsSort == '') {
					this.$message.error('权重不能为空');
					return;
				} else if (parseInt(this.groupData.goodsSort) < 0 || parseInt(this.groupData.goodsSort) > 999) {
					this.$message.error('权重要大于0小于999');
					return;
				}
				if (this.groupData.inventoryType == 'spec' && this.tabledata.length == 0) {
					this.$message.error('请配置商品规格！');
					return;
				}
				//如果发布的是规格商品时，此时手动校验输入的价格，库存等
				if (this.tabledata.length > 0) {
					console.log(this.tabledata);
					this.tabledata.forEach(itemTest => {
						//开始校验
						console.log(itemTest);
						if (itemTest.value == '') {
							this.$message.error('请选择商品规格');
							return;
						}
						if (itemTest.goodsInventory != 0) {
							if (itemTest.goodsInventory != '') {
								//校验商品库存
								console.log(itemTest.goodsInventory);
								if (!Number(itemTest.goodsInventory)) {
									this.$message.error('商品库存数量只能是0-1000000之间的整数');
									return;
								} else {
									const re = /^[0-9]*$/;
									const rsCheck = re.test(itemTest.goodsInventory);
									if (!rsCheck) {
										this.$message.error('商品库存数量只能是0-1000000之间的整数');
										return;
									} else {
										if (itemTest.goodsInventory < 0 || itemTest.goodsInventory > 1000000) {
											this.$message.error('商品库存数量只能是0-1000000之间的整数');
											return;
										}
									}
								}
							} else {
								this.$message.error('商品库存不能为空');
								return;
							}
						} else {
							//商品库存可以为0
							itemTest.goodsInventory = 0;
						}

						//开始校验商品售价
						if (itemTest.price != 0) {
							console.log(itemTest.price);
							if (itemTest.price && itemTest.price != '') {
								if (!this.testPriceMethod(itemTest.price)) {
									this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
									return;
								}
							} else {
								this.$message.error('价格不可以输入为空11');
								return;
							}
						} else {
							//商品售价可以为0
							itemTest.price = 0.0;
						}

						//开始校验商品进货价
						if (itemTest.purchasePrice != 0) {
							if (itemTest.purchasePrice && itemTest.purchasePrice != '') {
								if (!this.testPriceMethod(itemTest.purchasePrice)) {
									this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
									return;
								}
							} else {
								this.$message.error('进货价不可以输入为空');
								return;
							}
						} else {
							//商品进货价可以为0
							itemTest.purchasePrice = 0.0;
						}

						//开始校验商品原价
						if (itemTest.originalPrice != 0) {
							if (itemTest.originalPrice && itemTest.originalPrice != '') {
								if (!this.testPriceMethod(itemTest.originalPrice)) {
									this.$message.error('价格/原价/进货价必须是0.01-99999999.99之间的数字');
									return;
								}
							} else {
								this.$message.error('原价不可以输入为空');
								return;
							}
						} else {
							//商品原价可以为0
							itemTest.originalPrice = 0.0;
						}

						//开始校验商品编号
						if (itemTest.goodsSerial != 0) {
							if (!itemTest.goodsSerial) {
								this.$message.error('商品编号输入不可以为空');
								return;
							} else {
								let newValue = itemTest.goodsSerial.replace(/\s*/g, '');
								const re = /^[A-Za-z0-9-_\./\u4e00-\u9fa5]{0,50}$/;
								const rsCheck = re.test(newValue);
								if (!rsCheck) {
									this.$message.error('商品编号最多为50个字符');
									return;
								} else {
									itemTest.goodsSerial = newValue;
								}
							}
						}
					});
				}

				//如果输入的有商品属性，长宽高等，也要交验
				console.log(this.groupData.goodsLength);
				if (this.groupData.goodsLength) {
					//如果商品的长输入不为空的话，就校验它
					if (!this.testPropertyMethod(this.groupData.goodsLength)) {
						this.$message.error('商品长度需要大于0小于1000');
						return;
					}
				}

				if (this.groupData.goodsWidth) {
					//如果商品的宽输入不为空的时候，就校验它
					if (!this.testPropertyMethod(this.groupData.goodsWidth)) {
						this.$message.error('商品宽度需要大于0小于1000');
						return;
					}
				}

				if (this.groupData.goodsHeight) {
					//如果商品的高不为空的话，就校验它
					if (!this.testPropertyMethod(this.groupData.goodsHeight)) {
						this.$message.error('商品高度需要大于0小于1000');
						return;
					}
				}

				if (this.groupData.goodsWeight) {
					//如果商品的重量不为空的话，就校验它
					if (!this.testPropertyMethod(this.groupData.goodsWeight)) {
						this.$message.error('商品重量需要大于0小于1000');
						return;
					}
				}

				this.naturalSpecList.forEach((item, index) => {
					this.groupData.goodsPropertyIds.push(this.groupData['naturalSelData' + index]);
				});
				let specMap = this.localSpec();
				//禁止重复提交
				this.isDisabled = true;
				let AddGoodsFinishParam = {
					goods: {
						id: this.goodsId,
						goodsName: this.groupData.goodsName,
						goodsClassId: this.goodsClassId,
						goodsBrandId: this.groupData.goodsBrandId,
						choiceType: this.groupData.choiceType,
						goodsMainPhotoUrl: this.groupData.goodsPhotos[0],
						supplierId: this.groupData.supplierId, //供货商
						transportId: this.groupData.transportId, //运费模板
						storeRecommend: this.groupData.storeRecommend, //商品推荐
						goodsSort: this.groupData.goodsSort, //权重
						inventoryType: this.groupData.inventoryType, //配置(全局/规格)
						userGoodsClassId: this.value[1], //店铺分类
						isDrugs: this.groupData.isDrugs, //是否是药品
						isPrescription: this.groupData.isPrescription, //是否是处方药
					},
					value: this.groupData.value, //商品规格
					goodsInventory: this.groupData.goodsInventory, //商品库存
					goodsPhotosArr: this.groupData.goodsPhotos,
					goodsVideoArr: this.groupData.goodsVideo,
					goodsSerial: this.groupData.goodsSerial, //商品编号
					purchasePrice: this.groupData.purchasePrice, //进货价
					originalPrice: this.groupData.originalPrice, //原价
					price: this.groupData.price, //商品价格
					goodsLength: this.groupData.goodsLength, //长
					goodsWidth: this.groupData.goodsWidth, //宽
					goodsHeight: this.groupData.goodsHeight, //高
					goodsVolume: this.goodsVolume, //体积
					goodsWeight: this.groupData.goodsWeight, //重量
					goodsDetails: this.groupData.goodsDetails, //商品详情
					goodsDetailsH5: this.groupData.goodsDetailsH5, //商品详情H5
					intentoryDetails: this.tabledata, //规格配置
					goodsPropertyIds: this.groupData.goodsPropertyIds,
					goodsClassSpecIds: this.goodsClassSpecIds,
					saleSpecMap:specMap[0],//自然属性列表, 文字描述
					saleSpecMapImg:specMap[1]//自然属性列表，图片路径
				};
				console.log(AddGoodsFinishParam);
				this.$refs['obj'].validate(valid => {
					if (valid) {
						console.log(valid)
						submitdata(AddGoodsFinishParam).then(res => {
							if (res.data.code == 200) {
								if (this.isPublish == true) {
									this.dialogSuccessVisible = true;
								} else {
									this.$message.success('操作成功！');
									// 发布消息给页面通知操作完成
									this.$EventBus.$emit('finishhandle', true);
								}
							} else {
								this.$EventBus.$emit('finishhandle', false);
								this.$message.error(res.data.message);
							}
						});
					} else {
						this.$message({
							type: 'warning',
							message: '请填写必要信息'
						});
						this.isDisabled = false;
						return false;
					}
				});
			},
			//包装自然属性，为了保存商品时让后台保存商品的修改后的属性值
			localSpec(){
				let objValue={};
				let objImg={};
				// let saleSpecS=this.saleSpecList;
				// for(let i=0;i<saleSpecS.length;i++){
				// 	let specChild=this.saleSpecList[i].childrenNodes;
				// 	for(let j=0;j<specChild.length;j++){
				// 		obj[specChild[j].id]=specChild[j].specpValue;
				// 	}
				// }
				let saleSpecS=this.specSelectData;
				for(let i=0;i<saleSpecS.length;i++){
					objValue[saleSpecS[i].id]=saleSpecS[i].specpValue;
					objImg[saleSpecS[i].id]=saleSpecS[i].specImageUrl;
				}
				let resultDate=[];
				resultDate.push(objValue);
				resultDate.push(objImg);
				return resultDate;
			}
		},
		mounted() {
			this.groupHeights = [];
			let doms = document.getElementsByClassName('avue-group');
			for (let i = 0, len = doms.length; i < len; i++) {
				this.groupHeights.push(doms[i].offsetTop);
			}
			//获取浏览器窗口高度
			let clientHeight = document.body.clientHeight; // -114px
			document.getElementById('avue-view').style.height = clientHeight - 114 + 'px';
			document.getElementsByClassName('el-card')[0].style.height = clientHeight - 114 + 'px';
			document.getElementsByClassName('el-card__body')[0].style.height = clientHeight - 114 + 'px';
			document.getElementsByClassName('el-card__body')[0].style.boxSizing = 'border-box';
			let contentHeight = document.getElementById('avue-view').offsetHeight;
			document.getElementsByClassName('scrollView')[0].style.height = contentHeight - 100 + 'px';
			document.getElementsByClassName('scrollView')[0].style.overflowY = 'scroll';
		}
	};
</script>
<style lang="scss" scoped>
	.checkimg {
		width: 20px;
		height: 20px;
	}

	.basic-container {
		height: 100%;
		overflow: hidden;
	}

	.basic-container {
		height: 100%;
	}

	.el-card__body {
		height: 100%!important;
	}

	.protitle {
		font-size: 12px;
		color: #606266;
	}

	.imgContainer {
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		flex-flow: column nowrap;
	}

	.upload {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.previewPic {
		display: flex;
		justify-content: flex-start;
	}

	.handlebox {
		width: 100%;
		height: 15px;
		display: flex;
		justify-content: space-around;
	}

	.tsmsg {
		font-size: 10px;
		color: #999;
		margin: 0px;
		padding-left: 10px;
	}

	.handlebox img {
		cursor: pointer;
	}

	.specitem {
		display: flex;
		justify-content: flex-start;
	}

	.goodsSpecConfig {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		overflow-x: scroll;
	}

	.specbox {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.ckeckitem {
		width: calc(100% - 80px);
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 0 0 20px;
	}

	.items {
		display: flex;
		align-items: center;
		min-width: 110px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.checkimg {
		width: 16px;
		padding: 0 5px;
		height: 16px;
		object-fit: cover;
		cursor: pointer;
	}

	table,
	th,
	td {
		border: 1px solid #dcdfe6;
		vertical-align: middle;
		text-align: center;
	}

	.spectab {
		width: 140px;
		display: table-cell;
		vertical-align: middle;
		font-size: 13px;
		height: 20px;
		line-height: 20px;
		padding: 8px;
	}
	/*    .ipttable {
          width: 50px;
        }*/
	table tr {
		line-height: 40px;
	}

	.specsBox {
		height: 30px;
		line-height: 30px;
		border: 0;
		background: transparent;
		text-align: center;
		width: 80px;
	}

	.storebox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sizebox {
		display: flex;
		justify-content: flex-start;
		flex: 1;
		flex-wrap: wrap;
	}

	.fromRow {
		width: 200px;
		display: flex;
		margin-bottom: 10px;
	}

	.boxSuccess {
		text-align: center;
	}

	.boxSuccess a {
		border: 0;
		color: #0f88eb;
		outline: none;
	}

	.boxSuccess a:hover {
		text-decoration: underline;
	}

	.icon-success {
		color: #0f88eb;
		height: 80px;
		font-size: 80px !important;
		text-align: center;
		vertical-align: middle;
	}

	.tip-success {
		height: 50px;
		line-height: 40px;
		color: #666;
		font-size: 15px;
		text-align: center;
		padding-bottom: 60px;
	}

	//视频图片外框
	.demo-image__preview {
		padding-top: 15px;
	}
	.avatar {
		width: 300px;
		height: 300px;
		border: 1px solid #f2f2f2;
	}
</style>
